<template>
    <div class="cards-page">
        <div class="cards-stage">
            <div class="pager" v-if="poetryList.length > 1">{{ displayPage }}/{{ poetryList.length }}</div>

            <button v-if="hasPrev" class="nav-btn prev" @click="prev" aria-label="上一首">‹</button>
            <button v-if="hasNext" class="nav-btn next" @click="next" aria-label="下一首">›</button>

            <Transition name="card-switch" mode="out-in">
                <div class="card-wrapper" :key="currentItem._key">
                    <LiquidGlassCard  :poetry="currentItem" :autoPlay="false" />
                </div>
            </Transition>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import LiquidGlassCard from '@/components/LiquidGlassCard.vue'
import data from '@/assets/json/poetry.json'

// 数据加唯一 key
const poetryList = reactive(data.map((p, i) => ({ ...p, _key: `${i}-${p.title}`, _originIndex: i })))
const activeIndex = ref(0)

const currentItem = computed(() => poetryList[activeIndex.value] || {})
const hasPrev = computed(() => activeIndex.value > 0)
const hasNext = computed(() => activeIndex.value < poetryList.length - 1)
const displayPage = computed(() => activeIndex.value + 1)

function prev(){
  if(hasPrev.value) activeIndex.value--
}
function next(){
  if(hasNext.value) activeIndex.value++
}
</script>
<style scoped lang="scss">
.cards-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.cards-stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

}

.pager {
    position:absolute;
    top:8px;
    right:12px;
    font-size:14px;
    letter-spacing:1px;
    font-family:'twbzk', sans-serif;
    color:#2e5f2e;
    background:rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    padding:4px 10px;
    border-radius:20px;
    z-index: 100;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.card-wrapper {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 过渡动画 */
.card-switch-enter-active,
.card-switch-leave-active {
    transition: all .45s cubic-bezier(.22,.76,.3,1);
}
.card-switch-enter-from {
    opacity: 0;
    transform: translateY(26px) scale(.95);
}
.card-switch-leave-to {
    opacity: 0;
    transform: translateY(-26px) scale(.95);
}

/* 翻页按钮 */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: 'twbzk', sans-serif;
    color:#2e5f2e;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: background .25s ease, transform .25s ease;
}
.nav-btn:hover { background: rgba(255,255,255,0.75); }
.nav-btn:active { transform: translateY(-50%) scale(.9); }
.nav-btn.prev { left: 12px; }
.nav-btn.next { right: 12px; }

@media (max-width: 640px) {
    .nav-btn { width: 40px; height:40px; font-size:24px; }
    .nav-btn.prev { left:4px; }
    .nav-btn.next { right:4px; }
}


@media (max-width:640px) {
    .cards-page {
        padding: 16px;
        min-height: 100vh;

    }

    .cards-stage {
        width: 100%;
        min-height: 100vh;
    }
}
</style>
